<!--
 * @Description: 个人信息 
 * @Author: zhao
 * @Date: 2022-07-04 09:37:00
 * @LastEditors: zhao
 * @LastEditTime: 2022-07-07 17:31:26
-->

<template>
    <div style="padding: var(--main-padding)">
        <div class="UserInfo">
            <div style="text-align: right">
                <el-button class="Edit" type="primary" @click="openEdit">修改个人信息</el-button>
            </div>
            <div v-if="!isEdit">
                <el-descriptions title="个人信息" :column="column">
                    <el-descriptions-item label="账号">
                        <span>{{ UserInfo.userName }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="手机号">
                        <span>{{ UserInfo.phone }}</span>
                    </el-descriptions-item>

                    <el-descriptions-item label="用户名">
                        <span>{{ UserInfo.realName }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="身份证">
                        <span>{{ UserInfo.idNumber }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="邮箱">
                        <span>{{ UserInfo.mail }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="职务">
                        <span>{{ UserInfo.duty }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="固定电话">
                        <span>{{ UserInfo.fixedPhone }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="邮编">
                        <span>{{ UserInfo.postalCode }}</span>
                    </el-descriptions-item>
                </el-descriptions>
                <el-descriptions title="单位信息" :column="column">
                    <el-descriptions-item label="工作单位">
                        <span>{{ UserInfo.workCompany }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="单位性质">
                        <span>{{ UserInfo.unitProperties }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="所属行业">
                        <span>{{ UserInfo.profession }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="单位地址">
                        <span>{{ UserInfo.companyAddress }}</span>
                    </el-descriptions-item>
                    <!-- <el-descriptions-item label="详细地址">
                        <span>{{ UserInfo.detailedAddress }}</span>
                    </el-descriptions-item> -->
                </el-descriptions>
            </div>

            <div v-if="isEdit">
                <el-form
                    :model="ruleForm"
                    label-position="right"
                    :inline="true"
                    :rules="rules"
                    ref="ruleForm"
                    label-width="100px"
                    class="demo-ruleForm"
                >
                    <el-form-item label="账号名称：" style="width: 100%">
                        <el-input v-model="ruleForm.userName" disabled placeholder="请输入账号名称"></el-input>

                        <p class="Alert hint">
                            <i class="el-icon-warning" style="font-size: 15px; color: #bbb"></i
                            >6-15个字符,可使用字母、数字、下划线。需以字母开头(账号不区分大小写)
                        </p>
                    </el-form-item>

                    <el-form-item label="手机号：" prop="phone" style="width: 100%">
                        <el-col :span="16">
                            <el-input v-model="ruleForm.phone" :disabled="disabledCode" placeholder="请输入手机号"></el-input>
                        </el-col>
                        <el-col :span="3" style="padding-left: 20px">
                            <el-button class="codeButtonName" type="text" @click="setCodeHide">编辑手机号</el-button>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="验证码：" required prop="code" v-if="isCode" style="width: 100%">
                        <el-col :span="10">
                            <el-input v-model="ruleForm.code" placeholder="请输入验证码"></el-input>
                        </el-col>
                        <el-col :span="3" style="padding-left: 20px">
                            <el-button class="codeButtonName" :disabled="disabled" @click="validateFieldCode()">{{ codeButtonName }} </el-button>
                        </el-col>
                    </el-form-item>

                    <el-form-item label="姓名：" prop="realName">
                        <el-col :span="24">
                            <el-input v-model="ruleForm.realName" placeholder="请输入姓名"></el-input>
                        </el-col>
                    </el-form-item>

                    <el-form-item label="身份证：" prop="idNumber">
                        <el-col :span="24">
                            <el-input v-model="ruleForm.idNumber" placeholder="请输入身份证"></el-input>
                        </el-col>
                    </el-form-item>

                    <el-form-item label="邮箱：" prop="mail">
                        <el-col :span="24">
                            <el-input v-model="ruleForm.mail" placeholder="请输入邮箱"></el-input>
                        </el-col>
                        <!-- <el-col :span="1">
                            <i class="el-icon-warning" style="font-size: 20px; color: #bbb"></i>
                        </el-col> -->
                        <!-- <el-col :span="11" class="Alert">
                            <span>用于接收订单相关消息</span>
                        </el-col> -->
                    </el-form-item>

                    <el-form-item label="职务：" prop="duty">
                        <el-col :span="24">
                            <el-input v-model="ruleForm.duty" placeholder="请输入职务"></el-input>
                        </el-col>
                    </el-form-item>

                    <el-form-item label="固定电话：" prop="fixedPhone">
                        <el-col :span="24">
                            <el-input v-model="ruleForm.fixedPhone" placeholder="请输入固定电话"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="邮编：" prop="postalCode">
                        <el-col :span="24">
                            <el-input v-model="ruleForm.postalCode" placeholder="请输入邮编"></el-input>
                        </el-col>
                    </el-form-item>

                    <el-form-item label="工作单位：" prop="workCompany">
                        <el-col :span="24">
                            <el-input v-model="ruleForm.workCompany" placeholder="请输入工作单位"></el-input>
                        </el-col>
                    </el-form-item>

                    <el-form-item label="单位性质：" prop="unitProperties">
                        <el-col :span="24">
                            <el-input v-model="ruleForm.unitProperties" placeholder="请输入单位性质"></el-input>
                        </el-col>
                    </el-form-item>

                    <el-form-item label="所属行业：" prop="profession">
                        <el-col :span="24">
                            <!-- <el-input v-model="ruleForm.profession" placeholder="请输入所属行业"></el-input> -->
                            <el-select v-model="ruleForm.profession" placeholder="请输入所属行业" style="width: 93%">
                                <el-option
                                    v-for="item in profession"
                                    :key="item.professionName"
                                    :label="item.professionName"
                                    :value="item.professionName"
                                >
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-form-item>

                    <el-form-item label="单位地址：" prop="companyAddress">
                        <el-col :span="24">
                            <el-input v-model="ruleForm.companyAddress" placeholder="请输入单位地址"></el-input>
                        </el-col>
                    </el-form-item>

                    <!-- <el-form-item label="详情地址：" prop="detailedAddress">
                        <el-col :span="6">
                            <el-input v-model="ruleForm.detailedAddress" placeholder="请输入单位详细地址"></el-input>
                        </el-col>
                    </el-form-item> -->

                    <el-form-item style="width: 100%; text-align: center">
                        <el-button type="primary" @click="onSubmit">提交</el-button>
                        <el-button type="info" plain @click="closureEdit">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import rules from "@/utils/rules"
export default {
    name: "",
    data() {
        return {
            UserInfo: {},

            ruleForm: {},
            rules: rules,

            isEdit: false,
            column: 3,

            isCode: false, //显示验证码框
            disabledCode: true, //编辑手机号按钮
            codeButtonName: "获取验证码",
            disabled: false,
            profession: [],
        }
    },

    components: {},

    computed: {},

    mounted() {
        this.getUserInfo()
        this.$store.state.map.mapList = []
    },

    methods: {
        getUserInfo() {
            this.$store.dispatch("user/getInfo").then((res) => {
                this.UserInfo = res.data
            })
        },
        onSubmit() {
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    const { msg, code } = await this.$store.dispatch("user/updateUserinfo", this.ruleForm)
                    if (code == 200) {
                        this.$message.success(msg || "修改成功")
                        this.isEdit = false
                        this.getUserInfo()
                    }
                } else {
                    return false
                }
            })
        },
        getCode() {
            if (this.codeButtonName == "获取验证码") {
                this.isCode = true
                let second = 60
                let name = second + "秒后重新获取"
                this.codeButtonName = name
                this.disabled = true
                second--
                let timestamp = setInterval(() => {
                    if (second <= 0) {
                        clearInterval(timestamp)
                        this.codeButtonName = "获取验证码"
                        this.disabled = false
                    } else {
                        let name = second + "秒后重新获取"
                        second--
                        this.codeButtonName = name
                    }
                }, 1000)
            }
        },
        //验证码
        validateFieldCode() {
            this.$refs.ruleForm.validateField("phone", (verifycode_check) => {
                if (verifycode_check) return
                this.getCode()
                this.$store.dispatch("user/getRegisteredCode", { phone: this.ruleForm.phone }).then((res) => {
                    if (res.code == 200) this.$message.success(res.msg || "发送成功")
                    if (res.code != 200) this.$message.error(res.msg || "发送失败")
                })
                // this.$refs.ruleForm.validateField("code", (user_mobile_check) => {
                //     if (user_mobile_check) return
                // })
            })
        },
        openEdit() {
            this.getProfession()
            this.isEdit = true
            this.ruleForm = { ...this.UserInfo }
            this.column = 3
        },
        closureEdit() {
            this.isCode = false
            this.isEdit = false
            this.column = 3
        },
        setCodeHide() {
            this.isCode = !this.isCode
            this.disabledCode = !this.disabledCode
        },
        async getProfession() {
            const { data, code } = await this.$store.dispatch("user/getProfession")

            if (code == 200) this.profession = data
        },
    },
}
</script>
<style lang='scss' scoped>
.UserInfo {
    background: white;
    padding: 40px;
    min-height: $height_full;
    font-size: 0.259rem !important;
}

.el-form {
    padding: 20px;
    margin: 0px auto;
    width: 80%;

    .el-col-1 {
        width: 2%;
        text-align: right;
    }

    i {
        // padding: 0 10px;
    }

    .Alert {
        color: #bbb;
        word-break: break-word; //文本超出 自动换行

        // display: flex;
        p {
            font-size: 12px;
            margin: 0;
        }
    }

    ::v-deep .el-input__inner {
        border: 1px solid #cccccc !important;
    }

    ::v-deep .el-form-item__content {
        // display: flex;
        // align-items: center;
    }

    // .code {
    //     display: flex;
    //     justify-content: flex-start;
    // }
}

::v-deep .el-descriptions {
    padding-bottom: 50px;

    .el-descriptions__title {
        font-size: 0.3rem !important;
    }

    .el-descriptions-item__label {
        font-size: 0.26rem;
        color: #333;
    }

    .el-descriptions-item__content {
        color: #999;
    }
}

.Edit {
    // background: #0076a8;
    // color: #fff;
    // border: none;
    // &:hover,
    // &:focus {
    //     background: #0076a8;
    //     color: #fff;
    // }
}

.phone {
    display: flex;
    justify-content: center;

    .el-button {
        margin: 0 10px;
    }
}

.hint {
    display: flex;
    align-items: center;
    line-height: 18px;
}
</style>